<template>
  <div>
    <h2>课程管理</h2>
    <el-row :gutter="39">
      <el-col :span="4"
        ><el-input v-model="curinput" placeholder="请输入课程名称"
      /></el-col>
      <el-col :span="5"
        ><el-select v-model="zt" class="m-2" placeholder="请选择状态">
          <el-option v-for="item in options" :key="item" :value="item"
            >{{ item }}
          </el-option>
        </el-select></el-col
      >
      <el-col :span="5"
        ><el-input v-model="nameinput" placeholder="请输入教师姓名"
      /></el-col>
      <el-col :span="5"
        ><el-select v-model="date" class="m-2" placeholder="请选择日期">
          <el-option
            v-for="item in newdata"
            :key="item.id"
            :label="item.label"
            :value="item.newtime"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="4"
        ><el-button type="primary" @click="submit()">查询</el-button></el-col
      >
    </el-row>

    <div class="btns">
      <el-button type="primary" class="one" @click="xz">新增</el-button>
      <el-button type="primary" class="two" @click="hs">批量回收</el-button>
      <el-button type="primary" class="three" @click="sj">批量上架</el-button>
      <el-button type="primary" class="four" @click="xj">批量下架</el-button>
    </div>
    <el-row :gutter="2" class="curtitle">
      <el-col :span="1"></el-col>
      <el-col :span="2">课程编号</el-col>
      <el-col :span="2">课程名称</el-col>
      <el-col :span="3">课程列表</el-col>
      <el-col :span="2">课程状态</el-col>
      <el-col :span="2">优惠价</el-col>
      <el-col :span="2">原价</el-col>
      <el-col :span="2">销量</el-col>
      <el-col :span="3">更新时间</el-col>
      <el-col :span="2">讲师</el-col>
      <el-col :span="2">操作</el-col>
    </el-row>
    <div class="box">
      <el-row
        :gutter="2"
        class="curdata"
        v-for="(data, index) in newdata"
        :key="data"
      >
        <el-col :span="1">
          <el-checkbox-group v-model="flag" @change="handleCheckedCitiesChange">
            <el-checkbox></el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="2">{{ data.classnum }}</el-col>
        <el-col :span="2">{{ data.class }}</el-col>
        <el-col :span="3"><img :src="data.imgsrc" /> </el-col>
        <el-col :span="2">{{ data.kczt }}</el-col>
        <el-col :span="2">￥{{ data.yhj }}</el-col>
        <el-col :span="2">￥{{ data.yj }}</el-col>
        <el-col :span="2">{{ data.xl }}单</el-col>
        <el-col :span="3">{{ data.newtime }}</el-col>
        <el-col :span="2">{{ data.teacher }}</el-col>
        <el-col
          :span="2"
          style="color: #598cff; cursor: pointer"
          @click="bj(index)"
          >编辑</el-col
        >
      </el-row>
    </div>
    <el-row :gutter="2" style="margin-top: 36px">
      <el-col
        :span="1"
        style="
          text-align: center;
          line-height: 35px;
          font-size: 18px;
          padding-left: 18px;
        "
        ><el-checkbox
          v-model="flag"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        ></el-col
      >
      <el-col :span="1"></el-col>
      <el-col :span="10"></el-col>
      <el-col :span="12"
        ><div class="demo-pagination-block">
          <!-- <div class="demonstration">Change page size</div> -->

          <el-pagination
            v-model:currentPage="currentPage2"
            v-model:page-size="pagenum"
            :page-sizes="[8, 5, 3, 1]"
            :small="false"
            :pageSize="pagenum"
            :disabled="disabled"
            :background="true"
            layout="sizes, prev, pager, next"
            :total="20"
            :curuent-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination></div
      ></el-col>
    </el-row>

    <el-form ref="formRef" :model="form" label-width="120px" :style="show">
      <el-form-item label="课程名称">
        <el-input v-model="curname" :value="curname">{{ curname }}</el-input>
      </el-form-item>
      <el-form-item label="列表图">
        <el-input placeholder="图片"> </el-input>
      </el-form-item>

      <el-form-item label="列表图">
        <el-switch v-model="value1" class="ml-2" />
      </el-form-item>

      <el-form-item label="原价">
        <el-input v-model="yj">{{ yj }}</el-input>
      </el-form-item>
      <el-form-item label="优惠价">
        <el-input v-model="yhj">{{ yhj }}</el-input>
      </el-form-item>
      <el-form-item label="课程描述">
        <el-input type="textarea" v-model="curtext">{{ curtext }}</el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <div class="shzt" :style="xzshow">
      <div class="shzt_top"></div>
      <p>确定要新增这条数据吗</p>

      <el-row gutter="40">
        <el-col :span="12"></el-col>
        <el-col :span="6"><el-button @click="xzyes">确定</el-button></el-col>
        <el-col :span="6"
          ><el-button style="background: #457dfb" @click="xzno"
            >取消</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="shzt" :style="hsshow">
      <div class="shzt_top"></div>
      <p>确定要回收此数据吗？</p>

      <el-row gutter="40">
        <el-col :span="12"></el-col>
        <el-col :span="6"><el-button @click="hsyes">确定</el-button></el-col>
        <el-col :span="6"
          ><el-button style="background: #457dfb" @click="hsno"
            >取消</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="shzt" :style="sjshow">
      <div class="shzt_top"></div>
      <p>你确定要上架此数据吗，上架之后会展示在用户列表中！</p>

      <el-row gutter="40">
        <el-col :span="12"></el-col>
        <el-col :span="6"><el-button @click="sjyes">确定</el-button></el-col>
        <el-col :span="6"
          ><el-button style="background: #457dfb" @click="sjno"
            >取消</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="shzt" :style="xjshow">
      <div class="shzt_top"></div>
      <p>你确定要下架此数据吗，下架之后会展示在用户列表中！</p>

      <el-row gutter="40">
        <el-col :span="12"></el-col>
        <el-col :span="6"><el-button @click="xjyes">确定</el-button></el-col>
        <el-col :span="6"
          ><el-button style="background: #457dfb" @click="xjno"
            >取消</el-button
          ></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import kcgldata from "../../../mockjs/kcgldata.js";
console.log(kcgldata.data);
let newdata = kcgldata.data.slice(0, 8);
// console.log(this.pageSize2);

export default {
  data() {
    return {
      kcgldata,
      newdata,
      pagenum: 8,
      page: 1,
      flag: false,
      nameinput: "",
      curinput: "",
      zt: "",
      date: "",
      options: ["已上架", "已下架"],
      curname: "",
      yj: "",
      yhj: "",
      curtext: "",
      show: "display:none",
      xzshow: "display:none",
      hsshow: "display:none",
      xjshow: "display:none",
      sjshow: "display:none",
      value1: "",
      index: "",
    };
  },
  methods: {
    xz() {
      this.xzshow = "display:block";
    },
    xj() {
      this.xjshow = "display:block";
    },
    sj() {
      this.sjshow = "display:block";
    },
    hs() {
      this.hsshow = "display:block";
    },
    xzyes() {
      this.xzshow = "display:none";
    },
    xzno() {
      this.xzshow = "display:none";
    },
    hsyes() {
      this.hsshow = "display:none";
    },
    hsno() {
      this.hsshow = "display:none";
    },
    sjyes() {
      this.sjshow = "display:none";
    },
    sjno() {
      this.sjshow = "display:none";
    },
    xjyes() {
      this.xjshow = "display:none";
    },
    xjno() {
      this.xjshow = "display:none";
    },
    bj(index) {
      this.show = "display:block";
      this.index = index;
      console.log(index);
    },
    onSubmit() {
      console.log(this.curname);

      if (this.curname != "") {
        this.newdata = this.kcgldata.data.filter((value) => {
          console.log(value.id);

          if (value.id === this.index) {
            // console.log(value);
            // console.log(value.id);

            value.class = this.curname;

            // console.log(value.class);
          }
          return this.kcgldata.data;
        });
        // console.log(this.kcgldata.data);
        if (this.yj != "") {
          this.newdata = this.kcgldata.data.filter((value) => {
            if (value.id === this.index) {
              value.yj = this.yj;
            }
            return this.kcgldata.data;
          });
        }
        if (this.yhj != "") {
          this.newdata = this.kcgldata.data.filter((value) => {
            if (value.id === this.index) {
              value.yhj = this.yhj;
            }
            return this.kcgldata.data;
          });
        }
      }

      this.newdata = this.newdata.slice(0, this.pagenum);
      this.show = "display:none";
    },
    cancel() {
      this.show = "display:none";
    },
    submit() {
      if (this.nameinput !== "") {
        this.newdata = kcgldata.data.filter((value) => {
          if (value.teacher === this.nameinput) {
            return value;
            // this.newdata = value;
            // console.log(value);
            // console.log(this.newdata);

            // return false;
          }
        });
      }
      if (this.curinput !== "") {
        this.newdata = kcgldata.data.filter((value) => {
          if (value.class === this.curinput) {
            return value;
            // this.newdata = value;
            // console.log(value);
            // console.log(this.newdata);

            // return false;
          }
        });
      }
      if (this.zt !== "") {
        this.newdata = kcgldata.data.filter((value) => {
          if (value.kczt === this.zt) {
            return value;
            // this.newdata = value;
            // console.log(value);
            // console.log(this.newdata);

            // return false;
          }
        });
      }
      if (this.date !== "") {
        this.newdata = kcgldata.data.filter((value) => {
          if (value.newtime === this.date) {
            return value;
            // this.newdata = value;
            // console.log(value);
            // console.log(this.newdata);

            // return false;
          }
        });
      }
    },
    // 全选
    allc() {
      if (this.flag === false) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    handleSizeChange(page) {
      // page = 1;
      // this.page = 1;
      page = 1;
      this.page = page;
      console.log(page);

      console.log(this.pagenum);
      this.newdata = this.kcgldata.data.slice(
        0 + this.pagenum * (page - 1),
        this.pagenum + this.pagenum * (page - 1)
      );
      this.handleCurrentChange(page);
      // this.handleCurrentChange = true;
      // handleCurrentChange(page);
    },
    handleCurrentChange(page) {
      console.log(page);
      this.page = page;
      this.newdata = this.kcgldata.data.slice(
        0 + this.pagenum * (page - 1),
        this.pagenum + this.pagenum * (page - 1)
      );
      console.log(this.newdata);
    },
    // handleSizeChange(){

    // }
  },
  components: {},
};
</script>

<style lang="less" scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  width: 500px;
}
h2 {
  margin-top: 18px;
  margin-left: 19px;
  margin-bottom: 40px;
  font-size: 18px;
}
.el-col-6 {
  flex: 0;
}
.el-row {
  padding-left: 39px;
}
.el-row .el-col {
  text-align: center;
}
.btns {
  display: flex;
  // margin-top: 22px;
}
.btns * {
  width: 160px;
  height: 40px;
  margin: 22px 39px;
}
.two {
  background-color: #95a6fc;
}
.three {
  background-color: #f7ba85;
}
.four {
  background-color: #999999;
}
.curtitle {
  font-size: 18px;
  margin-top: 65px;
}
.curtitle .el-col {
  border-bottom: 1px #bfbfbf solid;
}
.curdata {
  font-size: 18px;
  height: 66px;
  align-items: center;
  border-bottom: 1px #bfbfbf solid;
}
input {
  width: 20px;
  height: 20px;
}
img {
  width: 120px;
  height: 50px;
}
// .box {
//   // height: 524px;
// }
.el-form-item {
  width: 400px;
}
.el-form {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 35%;
  width: 500px;
  height: 500px;
  background-color: wheat;
  padding-top: 50px;
}
.shzt {
  background: white;
  width: 600px;
  height: 320px;
  position: absolute;
  z-index: 2;
  // margin: 0 auto;
  top: 50%;
  top: 25%;
  left: 30%;
  .shzt_top {
    width: 100%;
    height: 40px;
    background: #457dfb;
  }
  p {
    width: 500px;
    height: 200px;
    margin: 0 auto;
    font-size: 18px;
    padding: 50px;
  }
  .el-button {
    // margin: 0 auto;
    height: 40px;
    width: 120px;
    background: #bfbfbf;
  }
  .el-row {
    padding-right: 40px;
  }
}
</style>
